<template>
  <div>
    <a-card :bordered="false">
      <a-tabs v-model="currentTab" @change="callback">
        <a-tab-pane :key="1" tab="企划搭配">
          <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="48">
                <a-col :xxl="6" :xl="6" :lg="12" :sm="24">
                  <a-form-item label="ID搜索">
                    <a-input v-model="queryParam.qihuaId" placeholder="ID搜索" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :xxl="6" :xl="6" :lg="12" :sm="24">
                  <a-form-item label="搜索款号">
                    <a-input v-model="queryParam.pcode" placeholder="搜索款号" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :xxl="6" :xl="6" :lg="12" :sm="24">
                  <a-form-item label="评级">
                    <a-select v-model="queryParam.level" placeholder="请选择" show-search :filter-option="filterOption">
                      <a-select-option value="99">未评级</a-select-option>
                      <a-select-option value="10">S</a-select-option>
                      <a-select-option value="20">A</a-select-option>
                      <a-select-option value="30">B</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :xxl="6" :xl="6" :lg="12" :sm="24">
                  <a-form-item label="状态">
                    <a-select v-model="queryParam.qihuaStatus" placeholder="请选择">
                      <a-select-option value="">全部</a-select-option>
                      <a-select-option :value="1">上架</a-select-option>
                      <a-select-option :value="0">下架</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :xxl="6" :xl="7" :lg="12" :sm="24">
                  <a-form-item label="创建时间" has-feedback>
                    <a-range-picker style="width: 100%" valueFormat="YYYY-MM-DD" showToday format="YYYY-MM-DD" v-model="queryParam.createTime" />
                  </a-form-item>
                </a-col>

                <a-col :xxl="6" :xl="6" :lg="12" :sm="24">
                  <a-form-item label="风格标签">
                    <a-select v-model="queryParam.styleInfo" placeholder="请选择" mode="tags" show-search :filter-option="filterOption">
                      <a-select-option :value="item.code" v-for="item in styleList" :key="item.code">
                        {{ item.title }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :xxl="6" :xl="6" :lg="12" :sm="24">
                  <a-form-item label="场景标签">
                    <a-select v-model="queryParam.sceneInfo" placeholder="请选择" mode="tags" show-search :filter-option="filterOption">
                      <a-select-option :value="item.code" v-for="item in sceneList" :key="item.code">
                        {{ item.title }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :xxl="6" :xl="6" :lg="12" :sm="24">
                  <a-form-item label="品牌">
                    <a-select v-model="queryParam.brand" placeholder="请选择" show-search :filter-option="filterOption">
                      <a-select-option value="">全部</a-select-option>
                      <a-select-option :value="item.code" v-for="item in brandList" :key="item.code">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :xxl="6" :xl="6" :lg="12" :sm="24">
                  <a-form-item label="年份" has-feedback>
                    <a-date-picker
                      mode="year"
                      style="width: 100%"
                      placeholder="请选择年份"
                      format="YYYY"
                      v-model="queryParam.year"
                      :open="yearShowOne"
                      @change="handChange"
                      @openChange="openChangeOne"
                      @panelChange="panelChangeOne"
                    />
                  </a-form-item>
                </a-col>
                <a-col :xxl="6" :xl="6" :lg="12" :sm="24">
                  <a-form-item label="季节">
                    <a-select v-model="queryParam.season" placeholder="请选择">
                      <a-select-option :value="item.code" v-for="(item, index) in season" :key="index"> {{ item.name }} </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :xxl="6" :xl="6" :lg="12" :sm="24">
                  <a-form-item label="波段">
                    <a-select v-model="queryParam.bands" placeholder="请选择" default-value="all">
                      <a-select-option value="">全部</a-select-option>
                      <a-select-option v-for="(item, index) in bandsList" :key="index" :value="item.attribname">{{ item.attribname }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :xxl="6" :xl="6" :lg="12" :sm="24">
                  <a-form-item label="商品大类">
                    <a-select v-model="queryParam.bigCateIds" placeholder="请选择" show-search :filter-option="filterOption" @change="changeGood">
                      <a-select-option :value="item.key" v-for="item in categoryTrees" :key="item.key">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :xxl="6" :xl="6" :lg="12" :sm="24">
                  <a-form-item label="商品小类">
                    <a-select v-model="queryParam.smallCateIds" placeholder="请选择" show-search :filter-option="filterOption">
                      <a-select-option :value="item.key" v-for="item in scategorys" :key="item.key">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :md="24" :sm="24">
                  <span class="table-page-search-submitButtons" :style="{ float: 'left', overflow: 'hidden' }">
                    <a-button type="primary" @click="searchList">查询</a-button>
                    <a-button style="margin-left: 8px" @click="resetList">重置</a-button>
                    <a-button type="primary" style="margin-left: 8px" @click="addList">新增</a-button>

                    <a-button type="primary" style="margin-left: 8px" @click="handleImportXls">导入</a-button>

                    <a-button style="margin-left: 8px" type="primary" @click="frameClick(1)">上架</a-button>
                    <a-button style="margin-left: 8px" type="primary" @click="frameClick(0)">下架</a-button>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </a-tab-pane>
        <a-tab-pane :key="2" tab="待完善搭配" force-render>
          <div class="table-page-search-wrapper" style="margin-bottom: 10px">
            <a-form layout="inline">
              <a-row :gutter="48">
                <a-col :xxl="6" :xl="6" :lg="12" :sm="24">
                  <a-form-item label="款号搜索">
                    <a-input v-model="params.productCode" placeholder="款号搜索" allow-clear />
                  </a-form-item>
                </a-col>

                <a-col :xxl="6" :xl="6" :lg="12" :sm="24">
                  <a-form-item label="全部来源">
                    <a-select v-model="params.source" placeholder="请选择">
                      <a-select-option value="">全部</a-select-option>
                      <a-select-option :value="1">导购搭配</a-select-option>
                      <a-select-option :value="2">搭配师搭配</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :xxl="6" :xl="6" :lg="12" :sm="24">
                  <a-form-item label="品牌">
                    <a-select v-model="params.arcBrandId" placeholder="请选择" show-search :filter-option="filterOption">
                      <a-select-option value="">全部</a-select-option>
                      <a-select-option :value="item.code" v-for="item in brandList" :key="item.code">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :xxl="6" :xl="6" :lg="12" :sm="24">
                  <a-form-item label="年份" has-feedback>
                    <a-date-picker
                      mode="year"
                      style="width: 100%"
                      placeholder="请选择年份"
                      format="YYYY"
                      v-model="params.yearsList"
                      :open="yearShowOne2"
                      @change="handChange2"
                      @openChange="openChangeOne2"
                      @panelChange="panelChangeOne2"
                    />
                  </a-form-item>
                </a-col>
                <a-col :xxl="6" :xl="7" :lg="12" :sm="24">
                  <a-form-item label="创建时间" has-feedback>
                    <a-range-picker style="width: 100%" valueFormat="YYYY-MM-DD" showToday format="YYYY-MM-DD" v-model="params.createTime" />
                  </a-form-item>
                </a-col>
                <a-col :xxl="6" :xl="6" :lg="12" :sm="24">
                  <a-form-item label="季节">
                    <a-select v-model="params.seasonIdList" placeholder="请选择">
                      <a-select-option :value="item.code" v-for="(item, index) in season" :key="index"> {{ item.name }} </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :xxl="6" :xl="6" :lg="12" :sm="24">
                  <a-form-item label="波段">
                    <a-select v-model="params.bandList" placeholder="请选择" default-value="all">
                      <a-select-option value="">全部</a-select-option>
                      <a-select-option v-for="(item, index) in bandsList" :key="index" :value="item.attribname">{{ item.attribname }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :xxl="6" :xl="6" :lg="12" :sm="24">
                  <a-form-item label="商品大类">
                    <a-select v-model="params.bigCateIdList" placeholder="请选择" show-search :filter-option="filterOption" @change="changeGood">
                      <a-select-option :value="item.key" v-for="item in categoryTrees" :key="item.key">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :xxl="6" :xl="6" :lg="12" :sm="24">
                  <a-form-item label="商品小类">
                    <a-select v-model="params.smallCateIdList" placeholder="请选择" show-search :filter-option="filterOption">
                      <a-select-option :value="item.key" v-for="item in scategorys" :key="item.key">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :md="18" :sm="18">
                  <span class="table-page-search-submitButtons" :style="{ float: 'left', overflow: 'hidden' }">
                    <a-button type="primary" @click="searchParam">查询</a-button>
                    <a-button style="margin-left: 8px" @click="resetParam">重置</a-button>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </a-tab-pane>
      </a-tabs>
      <s-table
        ref="table"
        size="default"
        :rowKey="record => record.id"
        :columns="columnsList"
        :data="loadData"
        :pagination="paginationProps"
        :scroll="{ x: 2000 }"
        :rowSelection="currentTab == 1 ? rowSelection : null"
      >
        <span slot="showImage" slot-scope="record">
          <img class="img" :src="record.gallList[0].url" alt="" v-if="record.gallList && record.gallList.length > 0" />
          <img src="https://img.bzhz.jnbygroup.com/lack.png" style="width: 80px; height: 80px" v-else />
        </span>
        <span slot="effectImg">
          <img src="https://img.bzhz.jnbygroup.com/lack.png" style="width: 80px; height: 80px" />
        </span>

        <span slot="productImage" slot-scope="text, record">
          <a-skeleton :loading="skeLoading" :paragraph="false">
            <div v-if="record.productList && record.productList.length <= 5">
              <div v-for="(product, index) in record.productList" :key="index" class="like-theme" @click="handleDetails(product.skc)">
                <a-tooltip placement="top">
                  <template slot="title">
                    <span>{{ product.skc }}</span>
                  </template>
                  <img class="img" :src="product.extendJson.productImage" alt="" />
                </a-tooltip>
              </div>
            </div>
            <a-carousel arrows :dots="false" :slidesToShow="5" :infinite="false" style="margin-left: 30px" :slidesToScroll="5" v-if="record.productList && record.productList.length > 5">
              <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px">
                <a-icon type="left" />
              </div>
              <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
                <a-icon type="right" />
              </div>
              <div class="like-theme" v-for="product in record.productList" :key="product.id" @click="handleDetails(product.skc)">
                <a-tooltip placement="top">
                  <template slot="title">
                    <span>{{ product.skc }}</span>
                  </template>
                  <img class="img" :src="product.extendJson.productImage" alt="" />
                </a-tooltip>
              </div>
            </a-carousel>
          </a-skeleton>
        </span>
        <span slot="tag" slot-scope="record">
          <a-tag style="margin: 2px" color="blue" v-for="label in record.labelList" :key="label.labelId">
            {{ label.labelName }}
          </a-tag>
        </span>
        <span slot="tagLab" slot-scope="record">
          <a-tag style="margin: 2px" color="blue" v-for="label in record.tagList" :key="label.key">
            {{ label.value }}
          </a-tag>
        </span>
        <span slot="level" slot-scope="record">{{ record.level | isMuilt }} </span>
        <span slot="status" slot-scope="record">
          <div v-if="record.qihuabFashionerMatch">
            <span v-if="record.qihuabFashionerMatch.status === 1">上架</span>
            <span v-if="record.qihuabFashionerMatch.status === 0">下架</span>
          </div>
        </span>
        <span slot="ID" slot-scope="record">
          <div v-if="record.qihuabFashionerMatch">
            {{ record.qihuabFashionerMatch.id }}
          </div>
        </span>
        <span slot="type" slot-scope="text">{{ text | type }}</span>
        <span slot="createTime" slot-scope="record">
          <div v-if="record.qihuabFashionerMatch">
            {{ record.qihuabFashionerMatch.createTime }}
          </div>
        </span>
        <span slot="action" slot-scope="record">
          <div v-if="record.qihuabFashionerMatch">
            <a @click="handleAddAndEdit(record.qihuabFashionerMatch.id)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm title="确定上架吗?" ok-text="Yes" cancel-text="No" @confirm="handleUpOrDown(1, record.qihuabFashionerMatch.id)" v-if="record.qihuabFashionerMatch.status === 0">
              <a>上架</a>
            </a-popconfirm>
            <a-popconfirm title="确定下架吗?" ok-text="Yes" cancel-text="No" @confirm="handleUpOrDown(0, record.qihuabFashionerMatch.id)" v-if="record.qihuabFashionerMatch.status === 1">
              <a>下架</a>
            </a-popconfirm>
            <a-divider type="vertical" />
            <a-popconfirm title="确定删除？" @confirm="handleMatchDelete(record.qihuabFashionerMatch.id)">
              <a-icon slot="icon" type="question-circle-o" style="color: red" />
              <a href="javascript:;">删除</a>
            </a-popconfirm>
            <a-divider type="vertical" />
            <a @click="handleLog(record.qihuabFashionerMatch.id)">日志</a>
          </div>
        </span>

        <span slot="operation" slot-scope="record">
          <a @click="handleAddEdit(record)">编辑</a>
          <a-divider type="vertical" />

          <a-popconfirm title="确定删除？" @confirm="perfectDel(record.id)">
            <a-icon slot="icon" type="question-circle-o" style="color: red" />
            <a href="javascript:;">删除</a>
          </a-popconfirm>
          <!-- <a-divider type="vertical" /> -->
          <!-- <a @click="handleLog(record.bfashionerMatch.id)">日志</a> -->
        </span>
        <span slot="detailResp" slot-scope="record" class="product-img">
          <div v-if="record.detailRespList && record.detailRespList.length <= 5">
            <div v-for="(product, index) in record.detailRespList" :key="index" class="like-theme" @click="handleInfo(product.productCode, product.colorNo)">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{ product.productCode }}</span>
                </template>
                <img class="img" :src="product.imgUrl" alt="" />
              </a-tooltip>
            </div>
          </div>
          <a-carousel arrows :dots="false" :slidesToShow="5" style="margin-left: 30px" :slidesToScroll="5" v-else>
            <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px">
              <a-icon type="left" />
            </div>
            <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
              <a-icon type="right" />
            </div>
            <div class="like-theme" v-for="product in record.detailRespList" :key="product.id" @click="handleInfo(product.productCode, product.colorNo)">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{ product.productCode }}</span>
                </template>
                <img class="img" :src="product.imgUrl" alt="" />
              </a-tooltip>
            </div>
          </a-carousel>
        </span>
      </s-table>
    </a-card>
    <a-modal v-model="visible" width="700px" :footer="null" title="商品详情" @cancel="visible = false">
      <div class="details-wrapper">
        <img class="main-img" :src="productDetails.imgurl" alt="" v-if="productDetails" />
        <div class="text">
          <div class="t">款号：{{ productDetails.name }}</div>
          <div class="t">品名：{{ productDetails.value }}</div>
          <div class="t">年份：{{ productDetails.year }}</div>
          <div class="t">波段：{{ productDetails.band }}</div>
          <div class="t">品牌：{{ productDetails.brand }}</div>
          <div class="t">大类：{{ productDetails.bigClass }}</div>
          <div class="t">小类：{{ productDetails.smallClass }}</div>
        </div>
      </div>
    </a-modal>
    <Log :logVisible.sync="logVisible" ref="log"></Log>
    <j-import-modal ref="importModal" :url="getImportUrl()" :uploadParams="getUploadParams()" @ok="importOk" :serviceId="20" :templateUrl="templateUrl()"></j-import-modal>
  </div>
</template>
<script>
const columns = [
  {
    title: 'ID',
    width: 200,
    scopedSlots: { customRender: 'ID' }
  },
  {
    title: '效果图',
    width: 100,
    scopedSlots: { customRender: 'showImage' }
  },
  {
    title: '商品',
    width: 400,
    scopedSlots: { customRender: 'productImage' }
  },
  {
    title: '状态',
    width: 100,
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '评级',
    width: 100,
    scopedSlots: { customRender: 'level' }
  },
  {
    title: '标签',
    width: 300,
    scopedSlots: { customRender: 'tag' }
  },

  {
    title: '创建人',
    width: 120,
    dataIndex: 'createBy'
  },
  {
    title: '创建时间',
    width: 220,
    scopedSlots: { customRender: 'createTime' }
  },
  {
    title: '操作',
    width: 150,
    align: 'center',
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]
const columnsGrab = [
  {
    title: 'ID',
    width: 200,
    dataIndex: 'id'
  },
  {
    title: '来源',
    width: 100,
    dataIndex: 'source',
    scopedSlots: { customRender: 'type' }
  },
  {
    title: '效果图',
    width: 100,
    scopedSlots: { customRender: 'effectImg' }
  },
  {
    title: '商品',
    width: 400,
    scopedSlots: { customRender: 'detailResp' }
  },

  {
    title: '属性/标签',
    width: 300,
    scopedSlots: { customRender: 'tagLab' }
  },

  {
    title: '创建人',
    width: 120,
    dataIndex: 'createByName'
  },
  {
    title: '创建时间',
    width: 220,
    dataIndex: 'createTime'
  },
  {
    title: '操作',
    width: 150,
    align: 'center',
    fixed: 'right',
    scopedSlots: { customRender: 'operation' }
  }
]
import { STable } from '../components'
import { querySysCateTree } from '@api/box/api'
import JImportModal from '@/components/qiniuUpload/JImportModal'
import globalData from '@/assets/js/common'
import { addCondition, matchList, upOrDown, matchDelete, goodsSkcDetail, waitPerfectList, perfectDelete, getSizeNos } from '@/api/box/boxLook'
import { queryDim } from '@/api/box/workbench'
import { queryUploadSuccess } from '@/components/qiniuUpload/common'
import Log from './components/Log'
import moment from 'moment'
let bandList = []
for (let j = 1; j < 13; j++) {
  bandList.push(j)
}
export default {
  components: {
    STable,
    Log,
    JImportModal
  },
  data() {
    this.columns = columns
    this.columnsGrab = columnsGrab
    return {
      logVisible: false,
      visible: false,
      bandList,
      brandList: [],
      season: [],
      categoryTrees: [],
      scategorys: [],
      styleList: [],
      sceneList: [],
      columnsList: this.columns,
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      queryParam: {
        type: 2, // 有搭搭配
        searchType: 2,
        styleInfo: [],
        sceneInfo: [],
        smallCateIds: ''
      },
      params: {
        smallCateIdList: ''
      }, //待完善搭配
      queryGrabParam: {
        lastFashionerId: ''
      },
      yearShowOne: false,
      yearShowOne2: false,
      bandsList: [],
      selectedRowKeys: [],
      selectedRows: [],
      currentTab: 1,
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => this.fetchList(parameter),
      productDetails: {
        name: '',
        value: '',
        year: '',
        band: '',
        brand: '',
        bigClass: '',
        smallClass: ''
      },
      skeLoading: true
    }
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange
      }
    }
  },
  created() {
    this.getCondition()
    this.postQueryDim()
    this.getSysCateTree()
    this.getSize()
    if (localStorage.getItem('currentTab')) {
      this.currentTab = Number(localStorage.getItem('currentTab'))
      this.columnsList = this.columnsGrab
    }
  },
  filters: {
    type(type) {
      if (type === 1) {
        return '导购'
      } else if (type === 2) {
        return '搭配师'
      }
    },
    isMuilt(value) {
      if (value == 99) {
        return '未评级'
      } else if (value == 10) {
        return 'S'
      } else if (value == 20) {
        return 'A'
      } else if (value == 30) {
        return 'B'
      } else {
        return ''
      }
    }
  },
  watch: {
    $route(to, from) {
      if (from.path.includes('/box/boxLook/plannEdit') && to.path == '/box/boxLook/list') {
        localStorage.removeItem('currentTab')
        this.$refs.table.refresh()
      } else if (from.path == '/box/boxLook/list' && !to.path.includes('/box/boxLook/plannEdit')) {
        this.$destroy()
      } else if (!from.path.includes('/box/boxLook/plannEdit') && to.path == '/box/boxLook/list') {
        this.resetList()
      }
    }
  },
  methods: {
    templateUrl() {
      return 'https://img.bzhz.jnbygroup.com/importExcelTemp.xlsx'
    },
    // 上传成功后的方法
    importOk(result) {
      let that = this
      queryUploadSuccess(this.timer, result, 60000, function(x, data) {
        if (x == 'done' || x == 'warning') {
          that.$refs.importModal.close()
        }
      })
    },
    // 导入
    handleImportXls() {
      this.$refs.importModal.show()
    },
    // 处理上传业务的后台地址
    getImportUrl() {
      return ''
    },
    getUploadParams() {
      return { ...globalData.uploadParams }
    },

    handleLog(id) {
      this.$refs.log.getLog(id, 'parent')
      this.logVisible = true
    },
    handleAddAndEdit(id) {
      this.$router.push(`/box/boxLook/plannEdit/${id}`)
    },
    handleInfo(productCode, colorNo) {
      this.productDetails = {}
      this.visible = true
      const data = {
        requestData: {
          colorNo,
          productCode
        }
      }
      goodsSkcDetail(data).then(res => {
        if (res.code == 0) {
          this.productDetails = res.data
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    handleDetails(item) {
      const colorNo = item.substring(item.length - 3)
      const productCode = item.substring(0, item.length - 3)
      this.productDetails = {}
      this.visible = true
      const data = {
        requestData: {
          colorNo,
          productCode
        }
      }
      goodsSkcDetail(data).then(res => {
        if (res.code == 0) {
          if (res.data) {
            this.productDetails = res.data
          }
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    handleMatchDelete(id) {
      matchDelete(id).then(res => {
        if (res.code == 0) {
          this.$refs.table.refresh()
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    handleAddEdit(record) {
      console.log(record, 'record')
      let data = JSON.parse(JSON.stringify(record))
      let productList = data.detailRespList.map(e => {
        return {
          name: e.productCode,
          value: e.productName,
          color_name: e.colorName,
          colorno: e.colorNo,
          id: e.productId,
          imgurl: e.imgUrl,
          c_arcbrand_id: e.arcBrandId,
          brand: e.arcBrandName,
          year: e.years,
          small_season: e.seasonName,
          small_season_id: e.seasonId,

          m_band: e.band,
          m_small_category_id: e.smallCateId,
          m_small_category: e.smallCateName,
          m_big_category_id: e.bigCateId,
          m_big_category: e.bigCateName
        }
      })
      let arcList = [] //品牌
      let bigList = [] //大类
      let smallList = [] // 小类
      let seasonList = [] //季节
      let yearList = [] //年份
      let bandList = [] // 波段

      data.detailRespList.forEach(item => {
        let arcTemp = {
          key: item.arcBrandId,
          value: item.arcBrandName
        }
        arcList.push(arcTemp)

        let bigTemp = {
          key: item.bigCateId,
          value: item.bigCateName
        }
        bigList.push(bigTemp)

        let smallTemp = {
          key: item.smallCateId,
          value: item.smallCateName
        }
        smallList.push(smallTemp)

        let seasonTemp = {
          key: item.seasonId,
          value: item.seasonName
        }
        seasonList.push(seasonTemp)

        let yearTemp = {
          key: item.years,
          value: item.years
        }
        yearList.push(yearTemp)

        let bandTemp = {
          key: item.band,
          value: item.band
        }
        bandList.push(bandTemp)
      })

      arcList = this.objReduce(arcList) // 品牌
      bigList = this.objReduce(bigList) //大类
      seasonList = this.objReduce(seasonList) //季节
      yearList = this.objReduce(yearList) // 年份
      smallList = this.objReduce(smallList) // 小类
      bandList = this.objReduce(bandList) // 波段
      let params = {
        arcList: arcList, //品牌标签
        bigList: bigList, //大类标签
        seasonList: seasonList, //季节标签
        yearList: yearList, //年份标签
        smallList: smallList, //小类标签
        bandList: bandList, //波段标签
        productList: productList, //商品
        perfectId: record.id
      }
      localStorage.setItem('box_Perfect', JSON.stringify(params))
      this.$router.push(`/box/boxLook/plannEdit/${'add'}`)
    },
    // 去重
    objReduce(arr) {
      let obj = {}
      arr = arr.reduce((item, next) => {
        obj[next.key] ? '' : (obj[next.key] = true && item.push(next))
        return item
      }, [])

      return arr
    },
    // 弹出日历和关闭日历的回调
    openChangeOne(status) {
      this.yearShowOne = status
    },
    // 弹出日历和关闭日历的回调
    openChangeOne2(status) {
      this.yearShowOne2 = status
    },
    handChange() {
      this.queryParam.year = null
    },
    handChange2() {
      this.queryParam.yearList = null
    },

    // 得到年份选择器的值
    panelChangeOne(value) {
      this.queryParam.year = moment(value).format('YYYY')
      this.yearShowOne = false
    },
    panelChangeOne2(value) {
      this.params.yearsList = moment(value).format('YYYY')
      this.yearShowOne2 = false
    },
    addList() {
      this.$router.push(`/box/boxLook/plannEdit/${'add'}`)
    },
    frameClick(type) {
      if (!this.selectedRowKeys.length) {
        this.$message.warning('请选择')
        return
      }
      // console.log(this.selectedRowKeys, 'this.selectedRowKeys')
      console.log(this.selectedRows, ' this.selectedRows')
      let idList = this.selectedRows.map(item => item.qihuabFashionerMatch).map(info => info.id)
      console.log(idList)
      const data = {
        requestData: {
          ids: idList,
          type: type // :1上架，0下架
        }
      }
      upOrDown(data).then(res => {
        if (res.code == 0) {
          this.selectedRowKeys = []
          this.$refs.table.refresh()
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    handleUpOrDown(type, ids) {
      const data = {
        requestData: {
          ids: [ids],
          type: type // :1上架，0下架
        }
      }
      upOrDown(data).then(res => {
        if (res.code == 0) {
          this.$refs.table.refresh()
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    callback(key) {
      this.currentTab = key
      if (key == 1) {
        localStorage.removeItem('currentTab')
        this.queryParam = {
          type: 2, // 有搭搭配
          searchType: 2,
          styleInfo: [],
          sceneInfo: [],
          smallCateIds: ''
        }
        this.columnsList = this.columns
      } else if (key == 2) {
        this.params = {
          smallCateIdList: ''
        }
        this.columnsList = this.columnsGrab
      }
      this.$refs.table.refresh(true)
    },
    // 待完善删除
    perfectDel(id) {
      let data = {
        requestData: {
          id: id
        }
      }
      perfectDelete(data).then(res => {
        if (res.code == 0) {
          this.$refs.table.refresh()
        } else {
          this.$message.warning(res.msg)
        }
      })
    },

    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      // console.log(selectedRowKeys, selectedRows)
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    // stable
    async fetchList(parameter) {
      this.skeLoading = true
      let result
      if (this.currentTab == 1) {
        result = await this.fetchData(parameter)
      } else if (this.currentTab == 2) {
        result = await this.waitPerfect(parameter)
      }
      if (result.code == 0) {
        this.tableData = {
          data: result.data,
          page: result.page
        }
        this.getDealer = true
        return this.tableData
      }
      // this.$message.error(result.msg)
      let data = {
        page: {
          pageNo: 0,
          count: 0,
          pageSize: 10
        },
        data: []
      }
      return data
    },
    fetchData(parameter) {
      const queryParam = JSON.parse(JSON.stringify(this.queryParam))
      if (queryParam.bands) {
        queryParam.bands = queryParam.bands.toString()
        queryParam.bands = queryParam.bands.split(',')
      }
      if (queryParam.bigCateIds) {
        queryParam.bigCateIds = queryParam.bigCateIds.split(',')
      }

      if (queryParam.smallCateIds && queryParam.smallCateIds.length > 0) {
        queryParam.smallCateIds = queryParam.smallCateIds.toString()
        queryParam.smallCateIds = queryParam.smallCateIds.split(',')
      } else {
        queryParam.smallCateIds = []
      }
      if (queryParam.styleInfo) {
        queryParam.labelCodes = queryParam.styleInfo
      }
      if (queryParam.sceneInfo) {
        queryParam.labelCodes = queryParam.sceneInfo
      }
      if (queryParam.sceneInfo && queryParam.styleInfo) {
        queryParam.labelCodes = [...queryParam.styleInfo, ...queryParam.sceneInfo]
      }
      if (queryParam.createTime && queryParam.createTime.length > 0) {
        queryParam.qihuaCreateTimeBegin = queryParam.createTime[0]
        queryParam.qihuaCreateTimeEnd = queryParam.createTime[1]
      }
      delete queryParam.createTime
      delete queryParam.styleInfo
      delete queryParam.sceneInfo

      const data = {
        page: parameter,
        requestData: {
          ...queryParam
        }
      }

      console.log(queryParam, 'queryParam')

      return matchList(data).then(res => {
        if (res.code === 0) {
          const data = res
          if (data.data) {
            data.data.forEach(item => {
              item.productList.forEach(info => {
                info.extendJson = JSON.parse(info.extendJson)
              })
              if (item.galleryList) {
                item.gallList = item.galleryList.filter(item => item.type == 0)
              }
            })
          }
          this.skeLoading = false
          return data
        } else {
          this.$message.error(res.msg)
          const data = {
            page: {
              pageNo: 0
            },
            data: []
          }
          this.skeLoading = false
          return data
        }
      })
    },
    waitPerfect(parameter) {
      let queryParam = JSON.parse(JSON.stringify(this.params))
      console.log(queryParam.productCode, ' queryParam.productCode')
      if (queryParam.smallCateIdList && queryParam.smallCateIdList.length > 0) {
        queryParam.smallCateIdList = queryParam.smallCateIdList.toString()
        queryParam.smallCateIdList = queryParam.smallCateIdList.split(',')
      } else {
        queryParam.smallCateIdList = []
      }
      queryParam.bandList = queryParam.bandList ? [queryParam.bandList] : []
      queryParam.bigCateIdList = queryParam.bigCateIdList ? [queryParam.bigCateIdList] : []
      queryParam.seasonIdList = queryParam.seasonIdList ? [queryParam.seasonIdList] : []
      queryParam.yearsList = queryParam.yearsList ? [queryParam.yearsList] : []
      if (queryParam.createTime && queryParam.createTime.length > 0) {
        queryParam.startTime = queryParam.createTime[0]
        queryParam.endTime = queryParam.createTime[1]
      }
      delete queryParam.createTime
      const params = {
        page: parameter,
        requestData: {
          ...queryParam
        }
      }

      return waitPerfectList(params).then(res => {
        console.log(res)
        if (res.code === 0) {
          const data = res
          console.log(data.data)

          data.data.forEach(item => {
            item.commodityImg = item.detailRespList.map(info => {
              return info.imgUrl
            })
            // 波段
            item.bandList = item.detailRespList.map(info => {
              return {
                key: info.band,
                value: info.band
              }
            })

            // 品牌
            item.arcList = item.detailRespList.map(info => {
              return {
                key: info.arcBrandId,
                value: info.arcBrandName
              }
            })

            //大类
            item.bigList = item.detailRespList.map(info => {
              return {
                key: info.bigCateId,
                value: info.bigCateName
              }
            })
            //小类
            item.smallList = item.detailRespList.map(info => {
              return {
                key: info.smallCateId,
                value: info.smallCateName
              }
            })
            // 年份
            item.yearList = item.detailRespList.map(info => {
              return {
                key: info.years,
                value: info.years
              }
            })
            //季节
            item.seasonList = item.detailRespList.map(info => {
              return {
                key: info.seasonId,
                value: info.seasonName
              }
            })
            item.arcList = this.objReduce(item.arcList) //过滤
            item.bigList = this.objReduce(item.bigList) //过滤
            item.seasonList = this.objReduce(item.seasonList) //过滤
            item.yearList = this.objReduce(item.yearList) //过滤
            item.smallList = this.objReduce(item.smallList) //过滤
            item.bandList = this.objReduce(item.bandList) //过滤
            item.tagList = [...item.arcList, ...item.bigList, ...item.seasonList, ...item.yearList, ...item.smallList, ...item.bandList]
          })

          console.log(data.data, ' data.data')
          return data
        } else {
          this.$message.error(res.msg)
          const data = {
            page: {
              pageNo: 0
            },
            data: []
          }
          return data
        }
      })
    },
    // 企划搭配重置
    resetList() {
      this.queryParam = {
        type: '2',
        searchType: 2,
        smallCateIds: ''
      }
      this.scategorys = []
      this.$refs.table.refresh()
    },
    // 完善搭配重制
    resetParam() {
      this.params = {
        smallCateIdList: ''
      }
      this.scategorys = []
      this.$refs.table.refresh()
    },

    searchList() {
      this.$refs.table.refresh(true)
    },

    searchParam() {
      this.$refs.table.refresh()
    },
    changeGood(value) {
      let scategorys = this.categoryTrees.filter(e => e.key == value)
      this.scategorys = scategorys[0].childCategory
      this.queryParam.smallCateIds = ''
      this.params.smallCateIdList = ''
    },
    getCondition() {
      addCondition().then(res => {
        if (res.code === 0) {
          const { arcBrand, fashioner } = res.data
          this.brandList = arcBrand
          this.fashionerList = fashioner
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    postQueryDim() {
      queryDim().then(res => {
        if (res.code === 0) {
          this.categoryTrees = res.data.categoryTrees
          this.bandsList = res.data.bandsV2
        } else {
          this.$message.error()
        }
      })
    },
    getSysCateTree() {
      querySysCateTree('B08')
        .then(res => {
          const { code, result, message } = res
          if (code == 0) {
            let data = result
            this.styleList = data[0].children
            this.sceneList = data[3].children
          } else {
            this.$message.error(message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    getSize() {
      getSizeNos().then(res => {
        if (res.code === 0) {
          console.log(res, 'res')
          this.season = res.data[3].children
        } else {
          this.$message.error()
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
.show-img {
  display: block;
  width: 100%;
}
.details-wrapper {
  display: flex;
  padding-bottom: 40px;
  .main-img {
    display: block;
    width: 40%;
  }
  .text {
    flex: 1;
    margin-left: 10%;
    line-height: 35px;
    font-size: 14px;
  }
}
.id-wrapper {
  font-size: 12px;
  text-align: center;
  span {
    color: #999;
  }
}
.product-img {
  font-size: 12px;
  .img-item {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    text-align: center;
  }
}
.time {
  font-size: 12px;
  color: #999;
}
.img {
  display: block;
  margin: 2px auto;
  width: 60px;
  height: 60px;
  // border: 1px dashed #f5f5f5;
  object-fit: scale-down;
  cursor: pointer;
}

.bottom {
  width: 100%;
  display: flex;
  .imgs {
    width: 180px !important;
    height: 120px !important;
    position: relative;
    // background: #d8d8d8;
    border-radius: 4px;
    overflow: hidden;
  }
}
.four-imgs {
  border: 1px solid #d9d9d9;
  background: #fff;
}
.small-img {
  width: 50%;
  height: 50%;
  object-fit: scale-down;
  float: left;
  display: block;
}
.like-theme {
  position: relative;
  display: inline-block;
  width: 54px !important;
  margin-right: 8px;
  p {
    text-align: center;
    position: absolute;
    bottom: -2px;
    width: 54px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 12px;
  }
  .imgs {
    padding: 4px;
  }
}
.imgs {
  width: 60px !important;
  height: 60px !important;
  object-fit: scale-down;
  padding: 10px;
  // border: 1px solid #cdcdcd;
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  margin-top: 8px;
}
.ant-carousel {
  margin-top: 6px;
  width: 320px;
  .carousel-imgs {
    height: 100px;
    overflow: hidden;
    height: 54px;
    img {
      width: 60px;
      height: 60px;
      margin: 0 auto;
    }
  }

  .dots-imgs {
    width: 50px;
    height: 50px;
    border: 1px solid #cdcdcd;
    padding: 5px;
    object-fit: scale-down;
  }
  .slick-next::before {
    content: '';
  }
  .slick-prev::before {
    content: '';
  }
  /deep/ .slick-prev {
    left: -30px !important;
    top: 50% !important;
    .anticon {
      font-size: 16px;
    }
  }
  /deep/ .slick-next {
    right: -30px !important;
    top: 50% !important;
    .anticon {
      font-size: 16px;
    }
  }
  .custom-slick-arrow {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: rgb(116, 116, 116);
    background-color: transparent;
    opacity: 1;
    z-index: 2;
  }
  /deep/ .slick-dots-bottom {
    bottom: 50px;
    li {
      margin: 0 5px;
    }
  }
  /deep/.slick-disabled {
    color: #d9d9d9;
  }
}
</style>

